<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>ФОРМЫ</title>

<link type="text/css" rel = "stylesheet" href="js/jquery-ui/css/flick/jquery-ui-1.8.18.custom.css">
<link type="text/css" rel = "stylesheet" href="js/fancyapps-fancyBox-5403ca0/source/jquery.fancybox.css">
<script src = "js/jquery-ui/js/jquery-1.7.1.min.js"></script>
<script src = "js/fancyapps-fancyBox-5403ca0/source/jquery.fancybox.js"></script>
<script src = "js/jquery-ui/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
$(function (){
//$('#tabs1').tabs();
 $('#tabs2').tabs();
$("#inline1").fancybox({
	width: 400,
	closeBtn  : false,
	padding:0,
	overlayOpacity: 0.9,
	opacity:true,
	overlayColor : '#000',
	overlayShow:false
	
});
$("#inline2").fancybox({
	width: 400,
	closeBtn  : false,
	padding:0,
	overlayOpacity: 0.9,
	opacity:true,
	overlayColor : '#000',
	overlayShow:false
	
});
$("button[type='reset']").click($.fancybox.close);




});
</script>
<style>
.tabs{
width: 400px;
background: ##EAE9E1;
}
.tabs .tab{
background: #F9F9F2;
}
a{
font-weight: normal;
font-size:14px;
}
.tabs form#log fieldset{
	margin: 0 0 0 0;
	border:0;
	padding:0 0 10px 0;
}
.tabs form#log label {
	display: block;
	margin: 5px 0 3px 0;
	font-weight: normal;
	font-size:14px;
}
.tabs form#log textarea,
.tabs form#log input  {
	width: 340px;
	padding:5px;
	font-size:1.2em;
	border:none;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	border-left:1px solid rgba(0, 0, 0, .1);
	border-top:1px solid rgba(0, 0, 0, .1);
	background: #e2e1d7;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
}

.tabs form#log input.captcha{
width: 100px;
}

.tabs form#log textarea:FOCUS,
.tabs form#log input:FOCUS{	
	background: #fff;
}
.tabs form#log fieldset.check input{
margin: 7px 0 0;
	width:100px;
	float:left;
	
}
.tabs form#log fieldset.check label {
	width:120px;
	float: left;
}
.tabs form#log fieldset.agre input{
width:50px;
	float:left;
	margin: 0;
	margin: 2px 0 0;
}
.tabs form#log fieldset .w_agre{
float: left;
width: 280px;
font-size: 14px;
font-weight: normal;

}



.tabs form#log fieldset button{
cursor:pointer;
border:none;
padding:3px 5px 3px 5px;
-o-border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
border:1px solid rgba(0, 0, 0, .1);
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.tabs form#log fieldset button:hover{
background: #F7F6ED;
}
.tabs form#log fieldset .wrappcaptcha{
overflow: hidden;
width: 100%;
}
.tabs form#log fieldset img{
display: block;
float: left;
width: 120px;
}
.tabs form#log fieldset .wrappcaptcha a{
margin:20px 0 0 20px;
width:150px;
display: block;
float: left;

}
.tabs form#log fieldset a:HOVER{

text-decoration: none;
}
p{
font-size: 14px;
font-weight:normal;
}
#tabs1{
width:380px;
padding: 10px 0 5px 34px;
}
</style>
</head>
<body>

		<a id="inline1" href="#tabs1">Войти</a>
		<a id="inline2" href="#tabs2">Регистрация</a>
		<div style="display: none">
		
			<div id="tabs1" class="tabs">
			
			
				<form id="log" action="">
				<fieldset>
				<label for="login">Имя пользователя</label>
				<input id="login" type="text">
				</fieldset>
				<fieldset>
				<label for="pass">Пароль</label>
				<input id="pass" type="text">
				</fieldset>
				<fieldset class="check">
				
				<label for="save">Запомнить меня</label>
				<input id="save" type="checkbox">
				</fieldset>
				<fieldset class="button">
				<button type="submit">Войти</button>
				<button type="reset" >Отмена</button>
				</fieldset>
				</form>
			</div>
			
		</div>
		
		</div>
		<div style="display: none">
		
			<div id="tabs2" class="tabs">
			<ul>				
				<li><a href="#tabs-2">Регистрация</a></li>
				<li><a href="#tabs-3">Вспомнить пароль</a></li>
			</ul>
			
			<div id="tabs-2" class="tab"><form id="log" action="">
				<fieldset>
				<label for="login">Имя пользователя</label>
				<input id="login" type="text">
				</fieldset>
				<fieldset>
				<label for="email">Электронная почта</label>
				<input id="email" type="text">
				</fieldset>
				<fieldset class="twopass">
				<label for="pass">Пароль</label>
				<input id="pass" type="text">
				<label for="confirmpass">Пароль еще раз</label>
				<input id="confirmpass" type="text">
				</fieldset>
				<fieldset>
				<div class="wrappcaptcha">		
				<img alt="" src="images/capcha.jpg">
				<a href="#">Обновить картинку</a>
				</div>
				<label for="captcha">Введите символы на картинке</label>
				<input id="captcha" class="captcha" type="text">
				</fieldset>
				<fieldset class="agre" >
								
				<div class="w_agre"><span>Я согласен с</span><a href="#"> условиями и правилами</a></div>
				<input id="agre" type="checkbox">
				</fieldset>
				<fieldset class="button">
				<button type="submit">Зарегистрироваться</button>
				<button type="reset">Отмена</button>
				</fieldset>
				</form></div>
			<div id="tabs-3" class="tab">
			<p>Введите адрес электронной почты указанный вами при регистрации</p>
			<form id="log" action="">
				
				<fieldset>
				<label for="email">Электронная почта</label>
				<input id="email" type="text">
				</fieldset>
				
				<fieldset>
				<div class="wrappcaptcha">		
				<img alt="" src="images/capcha.jpg">
				<a href="#">Обновить картинку</a>
				</div>
				<label for="captcha">Введите символы на картинке</label>
				<input id="captcha" class="captcha" type="text">
				</fieldset>				
				<fieldset class="button">
				<button type="submit">Получить пароль</button>
				<button type="reset">Отмена</button>
				</fieldset>
				</form>
			</div>
		</div>
		
		</div>
		
		
</body>
</html>class="fancybox-item fancybox-close" title="Close"